<template>
	<view class="invite-friends">
		<image class="invite-bg" src="../static/img/setting/invite-header-bg.png" mode="widthFix"></image>
		<view class="btn-box">
			<static-image src="/pagesA/static/img/setting/save-btn.png" width="328" height="120" @click="shareFriends()"></static-image>
			<static-image src="/pagesA/static/img/setting/share-btn.png" width="328" height="120" @click="shareFriends()"></static-image>
		</view>
		<view class="invite-content">
		 	<view class="total-number-box">
		 		<view class="total-number-title">
		 			<view class="">我的成就</view>
		 		</view>
				<view class="number-box">
					<view class="">
						<view class="number-text">{{inviteInfo.inviteSuccessAmount || 0}}</view>
						<view class="number-label">累计收益 (元)</view>
					</view>
					<view class="">
						<view class="number-text">{{inviteInfo.inviteNum || 0}}</view>
						<view class="number-label">已邀请 (人)</view>
					</view>
					<view class="">
						<view class="number-text">{{inviteInfo.inviteSuccessNum || 0}}</view>
						<view class="number-label">成功邀请 (人)</view>
					</view>
				</view>
		 	</view>
			<view class="total-number-box">
				<view class="total-number-title">
					<view class="">邀请记录</view>
				</view>
				<view class="invite-list">
					<view class="flex-between-center" v-for="(item,index) in inviteList" :key="index">
						<view class="flex-align-center">
							<u-image border-radius="50%" width="64" height="64" :src="item.avatar || require('@/static/img/common/avatar.png')"></u-image>
							<view class="font-s-15 fw-b mar-l-10 text-over">{{item.nickName || '-'}}</view>
						</view>
						<view class="font-s-12 color-999">{{item.registrationDate?item.registrationDate.substring(0,16):'-'}}</view>
					</view>
				</view>
				<empty text="暂无邀请记录" height="500" v-if="inviteList.length===0 && loading==='nomore'"></empty>
			</view>
			<u-loadmore :status="loading" color="#999999" icon-color="#999999" v-if="inviteList.length || loading==='loading'"/>
		</view>
		<!-- 分享 -->
		<canvas class="canvas-box" :style="{width: '654rpx',height:'800rpx'}" canvas-id="inviteCanvas"></canvas>
		<u-mask :show="shareShow" @click="shareShow=false" :custom-style="{background: 'rgba(0, 0, 0, 0.72)'}">
			<view class="share-popup">
				<view class="mask-content" @tap.stop>
					<image @click="shareShow=false" class="close-btn" src="/static/img/common/icon-close.png" mode=""></image>
					<image class="share-image" :show-menu-by-longpress="true" :src="shareImg" mode="widthFix"></image>
					<view class="share-popup-handle">
						<view class="" @click="saveImg()">保存到相册</view>
						<view class="" @click="copyLink()">复制链接</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inviteInfo:{},
				inviteList:[],
				userInfo:{},
				loading: 'loading',
				shareShow: false,
				shareImg: ''
			}
		},
		onLoad() {
			this.getInviteInfo();
			this.getInviteList();
		},
		methods: {
			getInviteInfo(){
				this.$request({
					url: '/loginUserInfo/inviteInfo',
					method: 'get',
				}).then(res => {
					this.inviteInfo = res.data
				})
				this.$request({
					url: '/posterManage/getDetail',
					method: 'get',
					data:{id: 1}
				}).then(res => {
					this.userBackgroundImg = res.data.url
				})
				this.$request({
					url: '/loginUserInfo/getDetail',
					method: 'get'
				}).then(res => {
					this.userInfo = res.data
				})
			},
			getInviteList(){
				this.$request({
					url: '/loginUserInfo/selectInviteInfoList',
					method: 'get',
					data:{pageNum:1,pageSize:1000}
				}).then(res => {
					this.inviteList = res.data.records
					this.loading = 'nomore'
				})
			},
			// 分享好友
			shareFriends(){
				if(this.shareImg) return this.shareShow = true
				uni.showLoading({
					title:'海报生成中'
				})
				this.$common.userPosterCanvas(654,800,this.userBackgroundImg, this.userInfo.recommendUrl, this.userInfo.avatar, this.userInfo.name || this.userInfo.nickName, (tempFilePath) => {
					this.shareImg = tempFilePath
					this.shareShow = true
				});
			},
			// 复制链接
			copyLink(){
				this.$common.setClipboardData(this.userInfo.recommendH5Url)
				this.shareShow = false
			},
			// 保存图片
			saveImg(){
				// #ifdef H5
				return this.$u.toast('请长按图片保存到相册')
				// #endif
				uni.showLoading({
					title:'保存中'
				})
				uni.downloadFile({
					url:this.shareImg, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							let file = res.tempFilePath;
							uni.saveImageToPhotosAlbum({
								filePath: file,
								success: () => {
									uni.hideLoading();
									this.$u.toast('保存成功，快去分享吧~')
									this.shareShow = false
								},
								fail: () => {
									uni.hideLoading();
									this.$u.toast('保存失败，请重试')
								}
							});
						}
					}
				});
			},
		}
	}
</script>
<style>
	page{
		background: #FFF3EB;
	}
</style>
<style lang="scss" scoped>
	.invite-friends {
		padding-bottom: 24rpx;
		.canvas-box{
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: -1;
			transform: translateX(-100%);
		}
		.invite-bg{
			width: 100%;
		}
		.btn-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			position: relative;
			z-index: 2;
			margin-top: -150rpx;
		}
		.invite-content{
			padding: 0 24rpx;
			margin-top: 48rpx;
			.total-number-box{
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-bottom: 24rpx;
				border: 4rpx solid #FFFFFF;
				.total-number-title{
					width: 100%;
					height: 80rpx;
					background: rgba(255,46,31,0.04);
					border-radius: 24rpx 24rpx 0px 0px;
					display: flex;
					align-items: center;
					justify-content: center;
					>view{
						font-size: 32rpx;
						font-weight: bold;
						color: #B85733;
						position: relative;
						&:before{
							content: '';
							width: 160rpx;
							height: 2rpx;
							background: linear-gradient(90deg, rgba(184,87,51,0) 0%, #B85733 100%);
							position: absolute;
							left: -180rpx;
							top: 20rpx;
						}
						&:after{
							content: '';
							width: 160rpx;
							height: 2rpx;
							background: linear-gradient(90deg, #B85733 0%, rgba(184,87,51,0) 100%);
							position: absolute;
							right: -180rpx;
							top: 20rpx;
						}
					}
				}
				.number-box{
					display: flex;
					align-items: center;
					padding: 48rpx 0;
					>view{
						flex: 1;
						text-align: center;
						position: relative;
						.number-text{
							font-size: 56rpx;
							font-weight: bold;
							color: #FF3341;
						}
						.number-label{
							margin-top: 12rpx;
							font-size: 24rpx;
							color: #B86833;
						}
						&:not(:last-child):after{
							content: '';
							width: 2rpx;
							height: 60rpx;
							background: linear-gradient(180deg, rgba(184,87,51,0) 0, #B85733 50%, rgba(184,87,51,0) 100%);
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
				.invite-list{
					padding: 0 24rpx;
					>view{
						height: 120rpx;
						.text-over{
							max-width: 340rpx;
						}
						&:not(:last-child){
							border-bottom: 1rpx solid #f5f5f5;
						}
					}
				}
			}
		}
		.share-popup{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			.mask-content{
				width: 654rpx;
				position: relative;
				.share-image{
					width: 100%;
					height: 800rpx;
				}
				.close-btn{
					width: 56rpx;
					height: 56rpx;
					position: absolute;
					right: 0;
					top: -88rpx;
				}
				.share-popup-handle{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 48rpx;
					>view{
						width: 316rpx;
						height: 96rpx;
						background: linear-gradient( 135deg, #FFB647 0%, #FF881F 100%);
						border-radius: 16rpx;
						color: #FFFFFF;
						font-size: 32rpx;
						font-weight: bold;
						text-align: center;
						line-height: 96rpx;
						&:last-child{
							background: linear-gradient( 135deg, #3385FF 0%, #1F78FF 100%);
						}
					}
				}
			}
		}
	}
</style>
